import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Row, Select, Col, Button, Radio, message } from 'antd'
import { getSuperFileList } from '@/services/proTable'
import { updateProFile } from '@/services/proFile'
import { Config } from '@utils/Constants'
import ProCard from '@ant-design/pro-card'

const FormItem = Form.Item
const Option = Select.Option
const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
}
const defaultSuper = { id: 0, name: '', comment: '-无继承-' }

interface VoConfigFormProps {
  projectId:string,
  fileId:string,
  fileDetail:any,
}

const VoConfigForm: FC<VoConfigFormProps> = (props) => {

  const [form] = Form.useForm()
  const [superFileList, setSuperFileList] = useState<any>([defaultSuper])
  const { projectId, fileId,fileDetail } = props


  useEffect(() => {
    getSuperFileList({ project_id: projectId, flag: 'yes' }).then((res) => {
      if (res.code === 10000) {
        setSuperFileList([defaultSuper, ...res.data])
      }
    })

  }, [projectId])

  useEffect(() =>{
    form.resetFields();
  },[fileDetail])

  const handleOk = async () => {
    const { validateFields } = form
    const values = await validateFields()
    values.id = fileId
    if (values.super_id == 0) {
      delete values.super_id
    }
    // 提交数据
    updateProFile(values).then(res => {
      if (res.code === 10000) {
        message.success('保存成功！')
      }
    })
  }

  const flag = Config.VO_IGNORE.indexOf(fileDetail.name) > -1

  return (
    <ProCard title='Vo配置'>
      <Form form={form} initialValues={fileDetail} onFinish={() => handleOk()}>
        <Row>
          <Col md={12}>
            <FormItem {...formTailLayout} name="comment" label="类注释">
              <Input disabled={flag} placeholder="请输入类注释"/>
            </FormItem>
            <FormItem {...formTailLayout} name="super_id" rules={[{ required: true, message: '请选择继承对象' }]} label="继承对象">
              <Select disabled={flag} placeholder="请选择继承对象">
                {superFileList.map((value: any, index: number) => {
                  return (<Option key={index} value={value.id}>{value.name}-{value.comment}</Option>)
                })}
              </Select>
            </FormItem>

            <FormItem {...formTailLayout} name="name" rules={[{ required: true, message: '请输入类名' }]} label="类名">
              <Input disabled={flag} placeholder="请输入类名"/>
            </FormItem>
            <FormItem {...formTailLayout} name="paradigm" rules={[{ required: true, message: '请选择是否泛型' }]} label="泛型">
              <Radio.Group disabled={flag}>
                <Radio.Button value="yes">是</Radio.Button>
                <Radio.Button value="no">否</Radio.Button>
              </Radio.Group>
            </FormItem>
          </Col>
          <Col md={12}>
            <FormItem>
              <Button disabled={flag} type="primary" htmlType="submit"
                      style={{ marginLeft: 300, marginTop: 57 }}>保存</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </ProCard>
  )
}

export default VoConfigForm
